<template>
  <a-card :bordered="false">
    <a-row :gutter="16">
      <a-col :span="10">
        <a-timeline v-if="nodeInfoData.length" mode="alternate">
          <template v-for="item in nodeInfoData">
            <a-timeline-item :key="item.id" :color="!getNodeStatus(item)?'#e8e8e8':'blue'">
              <a-icon slot="dot" type="close-circle" v-if="getNodeStatus(item) === 'red'" style="font-size: 16px;color:red;" />
              <a-icon slot="dot" type="check-circle" v-if="getNodeStatus(item) === 'green'" style="font-size: 16px;color:green;" />
              <a-icon slot="dot" type="exclamation-circle" v-if="getNodeStatus(item) === 'yellow'" style="font-size: 16px;color:#faad14;" />
              <span class="font16">{{item.node_name + '-'+ (item.date?_formatDate(item.date):'')}}</span>
              <template v-for="(list,index) in item.customerNodeInformationProblem">
                <div :key="index">
                  <a-badge class="badge-list" @click="handleBadgeDetails(list,item.node_name)" v-if="getProblemStatus(list) === 'red'" status="error" :text="list.question"/>
                  <a-badge class="badge-list" @click="handleBadgeDetails(list,item.node_name)" v-if="getProblemStatus(list) === 'yellow'" status="warning" :text="list.question"/>
                  <a-badge class="badge-list" @click="handleBadgeDetails(list,item.node_name)" v-if="getProblemStatus(list) === 'green'" status="success" :text="list.question"/>
                  <a-badge class="badge-list" @click="handleBadgeDetails(list,item.node_name)" v-if="!getProblemStatus(list)" status="default" :text="list.question"/>
                </div>
              </template>
            </a-timeline-item>
          </template>
        </a-timeline>
        <a-empty v-else />
      </a-col>
      <a-col :span="14">
        <s-table
          size="middle"
          bordered
          row-key="id"
          :columns="columns"
          :data="loadData_"
          :customRow="customRow"
        >
        <!-- :scroll="{x:1160}" -->
        </s-table>
      </a-col>
    </a-row>
    <a-descriptions :title="'客户节点-'+nodeName" bordered>
      <a-descriptions-item label="问题">
        {{descriptionsData.question}}
      </a-descriptions-item>
      <a-descriptions-item label="完成效果">
        {{descriptionsData.reality_result}}
      </a-descriptions-item>
      <a-descriptions-item label="担当">
        {{descriptionsData.as_people}}
      </a-descriptions-item>
      <a-descriptions-item label="计划完成时间">
        {{descriptionsData.plan_finish_time && _formatDate(descriptionsData.plan_finish_time)}}
      </a-descriptions-item>
      <a-descriptions-item label="实际完成时间" :span="2">
        {{descriptionsData.reality_finish_time && _formatDate(descriptionsData.reality_finish_time)}}
      </a-descriptions-item>
      <a-descriptions-item label="对策" :span="3">
        <a-badge v-if="getProblemStatus(descriptionsData) === 'red'" status="error" :text="descriptionsData.countermeasure"/>
        <a-badge v-if="getProblemStatus(descriptionsData) === 'yellow'" status="warning" :text="descriptionsData.countermeasure"/>
        <a-badge v-if="getProblemStatus(descriptionsData) === 'green'" status="success" :text="descriptionsData.countermeasure"/>
        <a-badge v-if="Object.keys(descriptionsData).length && !getProblemStatus(descriptionsData)" status="default" :text="descriptionsData.countermeasure"/>
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<script>
import STable from '@/components/Xtable'
import { postAction } from '@/api/manage'
import { formatDate } from '@/utils/util'
export default {
  name: 'LargeProjectMonitoring',
  mixins: [],
  components: {
    STable
  },
  data() {
    return {
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'program_name',
          // width: 100,
          ellipsis: true
        },
        {
          title: '客户名称',
          align: 'center',
          // width: 100,
          dataIndex: 'client_name',
          ellipsis: true
        },
        {
          title: '产品名称',
          align: 'center',
          // width: 100,
          dataIndex: 'product_name',
          ellipsis: true
        },
        {
          title: '产品型号',
          align: 'center',
          // width: 100,
          dataIndex: 'type',
          ellipsis: true
        },
        {
          title: '采购总量',
          align: 'center',
          // width: 100,
          dataIndex: 'purchase_count',
          ellipsis: true
        },
        {
          title: '采购预算',
          align: 'center',
          // width: 100,
          dataIndex: 'purchase_budget',
          ellipsis: true
        },
        {
          title: '现状占比',
          align: 'center',
          // width: 100,
          dataIndex: 'new_zb',
          ellipsis: true
        },
        {
          title: '目标占比',
          align: 'center',
          // width: 100,
          dataIndex: 'target_zb',
          ellipsis: true
        },
        {
          title: '当前成交概率',
          align: 'center',
          // width: 100,
          dataIndex: 'cj_gl',
          ellipsis: true
        },
        {
          title: '预估销售额',
          align: 'center',
          // width: 100,
          dataIndex: 'ygxse',
          ellipsis: true
        },
        {
          title: '当前状态',
          align: 'center',
          // width: 100,
          dataIndex: 'zhuangtai_type',
          ellipsis: true
        }
      ],
      url: {
        list: '/sale/statisticalReports/getStandingBookList',
        nodeInfo: '/sale/statisticalReports/getCustomerNodeInformationData'
      },
      loadData_: parameter => {
        return postAction(this.url.list, Object.assign(parameter, this.queryParam)).then(res => {
          if (res.success) {
            res.result.records[0] && this.currentTable(res.result.records[0].id)
            return res.result
          } else {
            return {}
          }
        })
      },
      customKey: '',
      nodeInfoData: [],
      descriptionsData: {},
      nodeName: ''
    }
  },
  methods: {
    customRow(record, index) { // 右边table选中
      return {
        // 这个style就是我自定义的属性，也就是官方文档中的props
        style: {
          // 行背景色
          'background-color': record.id === this.customKey ? '#e6f7ff' : ''
        },
        on: {
          // 鼠标单击行
          click: event => {
            // 根据行记录ID、子表名称查询子表配置属性及数据
            this.currRecord = record
            this.currentTable(record.id)
          }
        }
      }
    },
    getNodeInfo(id) {
      this.descriptionsData = {}
      this.nodeName = ''
      postAction(this.url.nodeInfo, { program: id }).then(res => {
        console.log(res)
        this.nodeInfoData = res.result
      })
    },
    _formatDate(value) {
      return formatDate(value, 'YYYY-MM-DD')
    },
    currentTable(id) {
      this.customKey = id
      this.getNodeInfo(id)
    },
    getNodeStatus(data) {
      if (!data.date) {
        return ''
      }
      const date = formatDate(data.date, 'YYYY-MM-DD') + ' 23:59:59'
      let currentDate = new Date()
      currentDate = currentDate.getFullYear() + '-' + currentDate.getMonth() + 1 + '-' + currentDate.getDate() + ' 00:00:00'
      const dateTime = date && new Date(date).getTime()
      const currentDateTime = new Date(currentDate).getTime()
      if (data.zhuangtai_type === '通过') {
        return 'green'
      } else if (data.zhuangtai_type === '未通过' || currentDateTime > dateTime) {
        return 'red'
      } else if (data.zhuangtai_type === '进行中' && currentDateTime < dateTime) {
        return 'yellow'
      } else {
        return ''
      }
    },
    getProblemStatus(data) {
      const date = data.plan_finish_time && formatDate(data.plan_finish_time, 'YYYY-MM-DD') + ' 23:59:59'
      let currentDate = new Date()
      currentDate = currentDate.getFullYear() + '-' + currentDate.getMonth() + 1 + '-' + currentDate.getDate() + ' 00:00:00'
      const dateTime = date && new Date().getTime(date)
      const currentDateTime = new Date().getTime(currentDate)
      if (data.reality_result === '已完成') {
        return 'green'
      } else if (dateTime && currentDateTime > dateTime) {
        return 'red'
      } else if (dateTime) {
        return 'yellow'
      } else {
        return ''
      }
    },
    handleBadgeDetails(data, name) {
      this.descriptionsData = data
      this.nodeName = name
    }
  }
}
</script>
<style lang="less" scoped>
.font16{
  font-size: 15px;
}
.badge-list{
  cursor: pointer;
  margin-bottom: 5px;
}
</style>
